{{define "формаНовогоМаршрута"}}

        <form id="routeForm" action="новыйМаршрут" method="ajaxPost" jsHanlder="Перехват sumbit со всего документа  обрабатывается через ajaxPost()">
            <caption>Добавление маршрута</caption>
            <div class="field">
                <label class="label">URL</label>
                <div class="control">
                    <input class="input" type="text" name="маршрут" placeholder="URL">
                </div>
            </div>
            <fieldset id="access_1">
                <div class="field">
                    <label class="label">Роль</label>
                    <div class="control">
                        <select id="role_1" name="роль[]">
                            <option value="Роль1">Роль 1</option>
                            <option value="Роль2">Роль 2</option>
                            <option value="Роль3">Роль 3</option>
                            <option value="Роль4">Роль 4</option>
                        </select>
                    </div>                 
                </div>

                <div class="field">
                    <label class="label">Права доступа</label>
                    <div class="control">
                        <select id="service_1" multiple name="доступ[]">
                            <option value="доступ1">доступ 1</option>
                            <option value="доступ2">доступ 2</option>
                            <option value="доступ3">доступ 3</option>
                            <option value="доступ4">доступ 4</option>
                        </select>
                    </div>    
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button type="button" class="button is-link" onclick="удалитьПраваДоступа('access_1')">Удалить права Доступа</button>
                    </div>
                    <div class="control">
                        <button type="button" class="button is-link"  onclick="добавитьПраваДоступа('access_1')">Добавить права Доступа</button>
                    </div>
                </div>

            </fieldset>
            <div class="field">
                <label class="label">Описание</label>
                <div class="control">
                    <textarea class="textarea" name="описание" placeholder="Описание"></textarea>
                </div>
            </div>

        <div id="handlersInputBlocks">

            <div class="collumns handler" id="handler_1" data-order="1">
                <input type="hidden" name="order[]" value="1" id="order-handler_1">
                <div class="field">
                    <label class="label">Сервис</label>
                    <div class="control">
                        <select id="service_1" name="сервис[]"  onchange="изменитьСписокОбработчиков(event)">
                            <option value="option1">Сервис 1</option>
                            <option value="option2">Сервис 2</option>
                            <option value="option3">Сервис 3</option>
                            <option value="option4">Сервис 4</option>
                        </select>
                    </div>
                </div>


           
                <div class="field">
                    <label class="label">Обработчик</label>
                    <div class="control">
                        <select id="handler_block-1" name="обработчик[]" >
                            <option value="option1">Обработчик 1</option>
                            <option value="option2">Обработчик 2</option>
                            <option value="option3">Обработчик 3</option>
                            <option value="option4">Обработчик 4</option>
                        </select>
                    </div>
                </div>
                <div class="field">
                    <label class="checkbox">
                        <input type="checkbox" id="async_1"  name="async[]">
                        Асинхронно
                    </label>
                </div>
            </div>

            <div class="field is-grouped">
                <div class="control">
                    <button type="button" class="button is-link" onclick="удалитьОбработчик('handler_1')">Удалить  обработчик</button>
                </div>
                <div class="control">
                    <button type="button" class="button is-link"  onclick="добавитьОбработчик('handler_1')">Добавить обработчик</button>
                </div>
            </div>
  
        </div>
    </form>

{{end}}

{{define "ДобавлениеУдалениеБлокаОбработчиков.js"}} 

<script>




    // Нужно добавить в рендер функцию, точнее в парсинг функцию обработчик который будет собирать все javascript из шаблонов и помещать их в один файл,  
    /*
    может можно сделать так чтобы каждый js блок кода был объявлен как define "обработчикФормыНовогоМаршрута.js"
    */


    function добавитьПраваДоступа (){

    }

    var количествоОбработчиков = 0 // просто номе добавленного обработчика, не уменьшается при удалении, потому что просто для идентификации
console.log("sdasd")
    function удалитьОбработчик(идТекущегоОбработчика) {
        let удаляемыйБлок = document.getElementById(идТекущегоОбработчика)
        следующийБлок = удаляемыйБлок.nextElementSibling
        while (следующийБлок) {
            следующийБлок.dataset.order = следующийБлок.dataset.order - 1
            следующийБлок = следующийБлок.nextElementSibling
        }
        удаляемыйБлок.remove()

    }
    function добавитьОбработчик(идТекущегоОбработчика) {
        // event.preventDefault();
        // event.stopPropagation();

        var ИдНовогоОбработчика=количествоОбработчиков+1

        let предидущийОбработчик=document.getElementById(идТекущегоОбработчика) 


        // если решили вставить в середину, то проверим следующие элементы и изменим очередь всех послеюущий обработчиков +1
        let следущийСуществующийЭлемент = предидущийОбработчик.nextElementSibling
        if (следущийСуществующийЭлемент) {            
            while (следущийСуществующийЭлемент) {
               let очередь=parseInt(следущийСуществующийЭлемент.dataset.order  ,10)           
                
               let инпутОчереди = document.getElementById(`order-handler_${очередь}`)
                инпутОчереди.value= очередь + 1
                инпутОчереди.id= `order-handler_${очередь+1}`                
                следущийСуществующийЭлемент.dataset.order = очередь + 1
                следущийСуществующийЭлемент = следущийСуществующийЭлемент.nextElementSibling
            }
        }

        let очередь=parseInt(предидущийОбработчик.dataset.order,10) + 1 // получаем очередь предидущего обработчика и формируем следующий номер очереди +1
        

        const inputBlocks = document.getElementById('inputBlocks');
        const новыйБлок = document.createElement('div');
 
        новыйБлок.className = 'block';
        новыйБлок.innerHTML = `
        <div class="collumns handler" id="handler_${ИдНовогоОбработчика}" data-order="${очередь}">
            <input type="hidden" name="order[]" value="${очередь}" id="order-handler_${очередь}">
            <div class="field">
                <label class="label">Сервис</label>
                <div class="control">
                    <select id="service_${ИдНовогоОбработчика}" name="сервис[]"  onchange="изменитьСписокОбработчиков(event)">
                        <option value="option1">Сервис 1</option>
                        <option value="option2">Сервис 2</option>
                        <option value="option3">Сервис 3</option>
                        <option value="option4">Сервис 4</option>
                    </select>
                </div>
            </div>


           
            <div class="field">
                <label class="label">Обработчик</label>
                <div class="control">
                    <select id="handler_block-${ИдНовогоОбработчика}" name="обработчик[]" >
                        <option value="option1">Обработчик 1</option>
                        <option value="option2">Обработчик 2</option>
                        <option value="option3">Обработчик 3</option>
                        <option value="option4">Обработчик 4</option>
                    </select>
                </div>
            </div>

          
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox" id="async_${ИдНовогоОбработчика}"  name="async[]">
                    Асинхронно
                </label>
            </div>
            <div class="field is-grouped">
                <div class="control">
                    <button type="button" class="button is-link" onclick="удалитьОбработчик('handler_${ИдНовогоОбработчика}')">Удалить  обработчик</button>
                </div>
                <div class="control">
                    <button type="button" class="button is-link"  onclick="добавитьОбработчик('handler_${ИдНовогоОбработчика}')">Добавить обработчик</button>
                </div>
            </div>
        </div>
        `;
        предидущийОбработчик.insertAdjacentElement('afterend', новыйБлок);

        // inputBlocks.appendChild(block);
        количествоОбработчиков=ИдНовогоОбработчика
    }
</script>
{{end}}